<!-- 专题列表 -->
<template>
  <view v-if="shenheStatus == 0" class="special">
    <u-sticky> </u-sticky>

    <!-- v-for="(item, index) in list" :key="index" -->
    <view class="special-list">
      <u-swipe-action
        :show="item.show"
        :index="index"
        v-for="(item, index) in list"
        :key="item.id"
        @click="handle('remove', item)"
        :options="options"
        @open="open(index)"
      >
        <!-- 左右排版 -->
        <view
          class="special-list-modeone"
          v-if="item.layout == 0"
          @click="goTopic(item.id)"
        >
          <view>
            <view class="text-more-2 title">{{ item.title }}</view>
            <view class="list-modeone-one">
              <view>{{
                $utils.turnDate(item.created_at * 1000, "yyyy-mm-dd")
              }}</view>
              <view>{{ item.read_count }}</view>
              <view v-if="item.goods_count">{{ item.goods_count }}</view>
            </view>
          </view>
          <image :src="item.cover_pic" mode="aspectFill"></image>
        </view>
        <!-- 左右排版 -->

        <!-- 上下排版 -->
        <view
          class="special-list-modetwo"
          v-if="item.layout == 1"
          @click="goTopic(item.id)"
        >
          <view class="title text-more-2">{{ item.title }}</view>
          <image :src="item.cover_pic" mode="aspectFill"></image>
          <view>
            <view>{{
              $utils.turnDate(item.created_at * 1000, "yyyy-mm-dd")
            }}</view>
            <view>{{ item.read_count }}</view>
            <view v-if="item.goods_count">{{ item.goods_count }}</view>
          </view>
        </view>
        <!-- 上下排版 -->
      </u-swipe-action>
    </view>

    <toolsMore :status="moreStatus"></toolsMore>

    <div class="footNav fixed" v-if="useFoot">
      <template v-for="(item, index) in controls">
        <footNav
          v-if="item.type == 'foot_nav'"
          :key="index"
          :param="item.param"
        ></footNav>
      </template>
    </div>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsMore from "@/components/tools/tools-more.vue";

export default {
  components: {
    Shenhe,
    toolsMore,
  },

  data() {
    return {
      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,

      show: false,
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
    };
  },

  onLoad() {
    this.clearData();
  },

  methods: {
    open(index) {
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },

    handle(type, params) {
      switch (type) {
        case "remove":
          this.remove(params.id);
          break;

        default:
          break;
      }
    },

    async remove(topic_id) {
      const res = await this.$allrequest.special.topicFavorite({
        action: 0,
        topic_id,
      });

      if (!res.code) {
        this.clearData();
      }

      this.$u.toast(res.msg);
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];
      this.getList();
    },

    async getList() {
      try {
        let { list: oldList, page } = this;
        this.moreStatus = 2;

        const res = await this.$allrequest.special.topicFavoriteList({
          page,
          limit: 10,
        });
        uni.stopPullDownRefresh();
        this.moreStatus = 1;
        if (!res.code) {
          let { list, row_count } = res.data,
            count = parseInt(row_count);
          if (list.length) {
            list.forEach((el) => {
              el.show = false;
            });
            oldList.push(...list);
            this.page = page + 1;
          }
          if (oldList.length >= count) {
            this.isEnd = true;
            this.moreStatus = 3;
          }
        }
      } catch (error) {}

      this.moreStatus = 1;

      uni.stopPullDownRefresh();
    },

    goTopic(id) {
      uni.navigateTo({
        url: "./topic?id=" + id,
      });
    },
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getList();
  },

  onPullDownRefresh() {
    this.clearData();
  },
};
</script>

<style lang="scss" scoped>
.special {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.special-list-modeone {
  display: flex;
  padding: 31rpx 22rpx 32rpx 25rpx;
  border-radius: 16rpx;
  justify-content: space-between;
  background-color: #ffffff;

  > image {
    width: 216rpx;
    height: 170rpx;
    background: #f2f2f2;
    border-radius: 10rpx;
  }

  > view {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 56rpx;
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #000000;
      line-height: 42rpx;
    }

    .list-modeone-one {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999999;
      line-height: 23rpx;
      view {
        margin-right: 24rpx;
      }
    }
  }
}

.special-list-modetwo {
  // margin: 24rpx 0;
  padding: 31rpx 24rpx;
  background-color: #ffffff;

  border-radius: 16rpx;
  .title {
    margin-bottom: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #000000;
    line-height: 42rpx;
  }

  > image {
    width: 100%;
    max-height: 360px;
    background: #f2f2f2;
    border-radius: 10rpx;
  }

  > view:last-child {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    height: 23rpx;
    font-size: 24rpx;
    color: #999999;

    view {
      margin-right: 24rpx;
    }
  }
}
</style>
